<!-- 更多停车弹出框 -->
<template>
  <div class="dy-panel" v-if="showParkingMoreLayer">
    <div class="dy-panel-main">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
      <div class="dy-panel-content">
        <div class="dy-panel-item" v-for="(item,index) in moreDataList" @click="clickMoreEvent(item)">
          <div class="t-l"></div>
          <div class="t-r"></div>
          <div class="b-l"></div>
          <div class="b-r"></div>
          <div class="dy-panel-icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
          <div class="dy-panel-text">{{item.title}}</div>
        </div>
      </div>
    </div>
  </div>
  <parking-drclbhqs-layer v-if="showDrclbhqsLayer" @closeChild="closeChild"></parking-drclbhqs-layer>
  <parking-dyclbhqs-layer v-if="showDyclbhqsLayer" @closeChild="closeChild"></parking-dyclbhqs-layer>
  <parking-jjrclfx-layer v-if="showJjrclfxLayer" @closeChild="closeChild"></parking-jjrclfx-layer>
  <parking-jjrcldb-layer v-if="showJjrcldbLayer" @closeChild="closeChild"></parking-jjrcldb-layer>
  <parking-whpcjcjl-layer v-if="showWhpcjcjlLayer" @closeChild="closeChild"></parking-whpcjcjl-layer>
  <ParkingKxtcLayer v-if="showKxtcLayer" @closeChild="closeChild"></ParkingKxtcLayer>
  <ParkingCstcLayer v-if="showCstcLayer" @closeChild="closeChild"></ParkingCstcLayer>
  <ParkingFtcqytcyjLayer v-if="showFtcqytcLayer" @closeChild="closeChild"></ParkingFtcqytcyjLayer>
</template>
<script setup>
  import {ref} from "vue";
  import drclbhqsImg from "../../../assets/img/parking_more/当日车流变化趋势.png";
  import dyclbhqsImg from "../../../assets/img/parking_more/当月车流变化趋势.png";
  import jjrclfxImg from "../../../assets/img/parking_more/节假日车流分析.png";
  import jjrcldbImg from "../../../assets/img/parking_more/节假日车流对比.png";
  import whpcjcjlImg from "../../../assets/img/parking_more/危化品车进出记录.png";
  import whpckxtcyjImg from "../../../assets/img/parking_more/whpckxtcyj.png";
  import whpccstcyjImg from "../../../assets/img/parking_more/whpccstcyj.png";
  import ftcqytcyjImg from "../../../assets/img/parking_more/ftcqytcyj.png";
  import ParkingDrclbhqsLayer from "./parkingDrclbhqsLayer.vue";
  import ParkingWhpcjcjlLayer from "./parkingWhpcjcjlLayer.vue";
  import ParkingDyclbhqsLayer from "./parkingDyclbhqsLayer.vue";
  import ParkingJjrclfxLayer from "./parkingJjrclfxLayer.vue";
  import ParkingJjrcldbLayer from "./parkingJjrcldbLayer.vue";
  import ParkingKxtcLayer from "./parkingKxtcLayer.vue";
  import ParkingCstcLayer from "./parkingCstcLayer.vue";
  import ParkingFtcqytcyjLayer from "./parkingFtcqytcyjLayer.vue";
  
  const props = defineProps({
    showParkingMoreLayer: Boolean
  })
  const emit = defineEmits(['closeMoreLayers','showMoreLayers']);

  const moreDataList = ref([
    {
      title:'当日车流变化趋势',
      name:'drclbhqs',
      icon: drclbhqsImg
    },
    {
      title:'当月车流变化趋势',
      name:'dyclbhqs',
      icon: dyclbhqsImg
    },
    {
      title:'节假日车流分析',
      name:'jjrclfx',
      icon: jjrclfxImg
    },
    {
      title:'节假日车流对比',
      name:'jjrcldb',
      icon: jjrcldbImg
    },
    {
      title:'危化品车进出记录',
      name:'whpcjcjl',
      icon: whpcjcjlImg
    }
    ,{
      title:'车辆跨线停车识别预警',
      name:'whpckxtcyj',
      icon: whpckxtcyjImg
    }
    ,{
      title:'危化品车超时停车预警',
      name:'whpccstcyj',
      icon: whpccstcyjImg
    }
    ,{
      title:'非停车区域停车预警',
      name:'ftcqytcyj',
      icon: ftcqytcyjImg
    }
  ])
  const showDrclbhqsLayer = ref(false);//显示 当日车流变化趋势
  const showDyclbhqsLayer = ref(false);//显示 当月车流变化趋势
  const showJjrclfxLayer = ref(false);// 显示 节假日车流分析
  const showJjrcldbLayer = ref(false);// 显示 节假日车流对比
  const showWhpcjcjlLayer = ref(false);//显示 危化品车进出记录
  const showKxtcLayer = ref(false);//显示 危化品车进出记录
  const showCstcLayer = ref(false);//显示 危化品车进出记录
  const showFtcqytcLayer = ref(false);//显示 危化品车进出记录

  const closeCurrent = function (){
    emit("closeMoreLayers",'parking');
  }
  const showCurrent = function (){
    emit("showMoreLayers",'parking');
  }
  const clickMoreEvent = function (item){
    closeCurrent();
    if (item.name === 'drclbhqs'){
      showDrclbhqsLayer.value = true;
    }else if (item.name === 'dyclbhqs'){
      showDyclbhqsLayer.value = true;
    }else if (item.name === 'whpcjcjl'){
      showWhpcjcjlLayer.value = true;
    }else if (item.name === 'jjrclfx'){
      showJjrclfxLayer.value = true;
    }else if (item.name === 'jjrcldb'){
      showJjrcldbLayer.value = true;
    }
    else if (item.name === 'whpckxtcyj'){
      showKxtcLayer.value = true;
    }
    else if (item.name === 'whpccstcyj'){
      showCstcLayer.value = true;
    }
    else if (item.name === 'ftcqytcyj'){
      showFtcqytcLayer.value = true;
    }
  }

  const closeChild = function (){
    showDrclbhqsLayer.value = false;
    showWhpcjcjlLayer.value = false;
    showJjrclfxLayer.value = false;
    showJjrcldbLayer.value = false;
    showDyclbhqsLayer.value = false;
    showKxtcLayer.value = false;
    showCstcLayer.value = false;
    showFtcqytcLayer.value = false;
    showCurrent()
  }

</script>
<style scoped>
.dy-panel-item{
  width: 28% !important;
}
</style>
